<template>
  <view class="login">
    <view class="top">
      <uv-navbar title="忘记密码" height="44px" titleStyle="{font-weight: bold;font-size: 1.1rem;}" bgColor="#dff8f7"
        @leftClick="leftClick"></uv-navbar>
    </view>
    <view class="userlogin">
      <view class="userlogin1">
        <uv-input placeholder="请输入您的手机号" customStyle="border:none;padding: 2%;" v-model="change1"></uv-input>
      </view>
      <view class="userlogin1">
        <uv-input placeholder="请输入您的密码" customStyle="border:none;padding: 2%;" v-model="change2"></uv-input>
      </view>
      <view class="userlogin1">
        <uv-input placeholder="确认密码" customStyle="border:none;padding: 2%;" v-model="change3"></uv-input>
      </view>
      <view class="userlogin1">
        <uv-input placeholder="请输入验证码" customStyle="border:none;padding: 2%;" v-model="change4">
          <!-- vue3模式下必须使用v-slot:suffix -->
          <template v-slot:suffix>
            <uv-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取"></uv-code>
            <uv-button @click="getCode" :text="tips" color="#008c8c" type="success" size="mini"></uv-button>
          </template>
        </uv-input>

      </view>
    </view>
    <view class="determine">
      <uv-button type="primary" color="#008c8c" shape="circle" text="确认修改" @click="zhuche"></uv-button>
      <view class="btn" @click="deng">登录</view>
    </view>
  </view>
</template>

<script>
  import {
    uniRequest
  } from "../../utils/request.js"
  export default {
    data() {
      return {
        tips: '',
        value: '内容',
        change1: '',
        change2: '',
        change3: '',
        change4: ''
      }
    },
    methods: {
      zhuche() {
        const mobile = this.change1
        const password = this.change2
        const code = this.change4
        console.log(mobile, password, code)
        if (code == '') {
          uni.showToast({
            title: '验证码不能为空', // 提示文字
            duration: 4000, // 显示时间，单位ms，默认2秒
            icon: 'success',
          })
        } else {
          uniRequest('login/forgot?server=1', function(err, data) {
            if (err) {
              // 错误
              console.log(err)
            } else {
              console.log('"成功了"', data)
              uni.showToast({
                title: '注册成功', // 提示文字
                duration: 2000, // 显示时间，单位ms，默认2秒
                icon: 'success',
              })
              uni.navigateTo({
                url: '/pages/login/login'
              })
            }
          }, 'POST', {
            mobile: mobile,
            code: code,
            password: password
          });
        }
      },
      deng() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      },
      change(e) {
        console.log('change', e);
      },
      //返回login
      leftClick() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        console.log('leftClick');
      },
      codeChange(text) {
        this.tips = text;
      },
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })

          setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.showToast({
              title: '验证码已发送',
              duration: 2000
            });

            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
            uniRequest('login/sms?server=1', function(err, data) {
              if (err) {
                // 错误
                console.log(err)
              } else {
                console.log('"成功了"', data)
                uni.showToast({
                  title: '验证码是' + data, // 提示文字
                  duration: 6000, // 显示时间，单位ms，默认2秒
                  icon: 'success',
                })
                const change4 = data
              }
            }, 'POST', {
              mobile: '17852488120',
            });
          }, 2000);
        } else {
          uni.showToast({
            title: '倒计时结束后再发送',
            duration: 2000
          });

        }
      },
    }
  }
</script>

<style lang="scss">
  .login {
    width: 100%;
    background: linear-gradient(to bottom, #e6f8f6, #fbfefd);
    height: 100vh;


    .top {
      padding-top: 20%;
      width: 90%;
      margin: auto;
      text-align: left;

      .login1 {
        font-size: 1.5rem;
        font-weight: bold;
      }

      .login2 {
        margin-top: 20rpx;
        font-size: 24rpx;
      }
    }

    /* 用户登录 */
    .userlogin {
      width: 90%;
      margin: auto;
      margin-top: 100rpx;

      background-color: #fff;
      border-radius: 30rpx;
      padding: 3%;

      .userlogin1 {
        width: 100%;
        margin-top: 40rpx;
        border-radius: 100rpx;
        height: 80rpx;
        line-height: 80rpx;
        color: #fff;
        text-align: center;
        background-color: #f7f8fa;
      }
    }

    .determine {
      width: 95%;
      margin: auto;

      margin-top: 100rpx;

      .btn {
        color: #c6cbcb;
        text-align: center;
        margin-top: 40rpx;
      }
    }
  }
</style>